import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import React from 'react';
import NetworkLogger from './NetworkLogger';
import AppEnvironmentScreen from './AppEnvironmentsScreen';
import { Icon, useAppTheme } from 'tsun-smart-ui';

type DebuggingScreenProps = {};

const Tab = createBottomTabNavigator();

const DebuggingScreen: React.FC<DebuggingScreenProps> = (props) => {
  const appTheme = useAppTheme()

  return (
    <>
      <Tab.Navigator
        initialRouteName="NetworkLogs"
        screenOptions={({ route }) => ({
          headerShown: false,
          tabBarActiveTintColor: appTheme.colors?.brand?.onPrimary,
          tabBarIcon: ({ focused, color }) => {
            let iconName;
            if (route.name === 'NetworkLogs') {
              iconName = focused ? 'Wi-Fi' : 'Wi-Fi';
            } else if (route.name === 'AppEnvironments') {
              iconName = focused
                ? 'earth'
                : 'earth';
            }
            return <Icon name={iconName} size={24} color={color} />;
          },
        })}
      >
        <Tab.Screen
          name="NetworkLogs"
          component={NetworkLogger}
          options={{ title: '网络日志' }}
        />
        <Tab.Screen
          name="AppEnvironments"
          component={AppEnvironmentScreen}
          options={{ title: '应用环境' }}
        />
      </Tab.Navigator>
    </>
  );
};

export default React.memo(DebuggingScreen);
